<template>
	<view class="container">
		<u--form :labelStyle="{fontSize: '28rpx', color: '#312C2A', height: '80rpx'}" labelWidth="100"
			labelPosition="left" errorType="toast">
			<view class="form">

				<u-form-item borderBottom>
					<view class="form-item">
						<view class="left">
							<u-image width="60rpx" height="60rpx" src="/static/images/a30.png"></u-image>
							<view class="">姓名</view>
						</view>
						<view class="right">易小博</view>
					</view>
				</u-form-item>
				<u-form-item borderBottom>
					<view class="form-item">
						<view class="left">
							<u-image width="60rpx" height="60rpx" src="/static/images/a44.png"></u-image>
							<view class="">性别</view>
						</view>
						<view class="right">易小博</view>
					</view>
				</u-form-item>
				<u-form-item borderBottom>
					<view class="form-item">
						<view class="left">
							<u-image width="60rpx" height="60rpx" src="/static/images/a31.png"></u-image>
							<view class="">手机号</view>
						</view>
						<view class="right">易小博</view>
					</view>
				</u-form-item>
				<u-form-item borderBottom>
					<view class="form-item">
						<view class="left">
							<u-image width="60rpx" height="60rpx" src="/static/images/a45.png"></u-image>
							<view class="">住址</view>
						</view>
						<view class="right">辽宁省 沈阳市 浑南区 浦江东方
大厦2006室</view>
					</view>
				</u-form-item>
				<u-form-item borderBottom>
					<view class="form-item">
						<view class="left">
							<u-image width="60rpx" height="60rpx" src="/static/images/a46.png"></u-image>
							<view class="">身份证号</view>
						</view>
						<view class="right">易小博</view>
					</view>
				</u-form-item>
				<u-form-item borderBottom>
					<view class="form-item">
						<view class="left">
							<u-image width="60rpx" height="60rpx" src="/static/images/a47.png"></u-image>
							<view class="">既往病史</view>
						</view>
						<view class="right">易小博</view>
					</view>
				</u-form-item>
				<u-form-item borderBottom>
					<view class="form-item">
						<view class="left">
							<u-image width="60rpx" height="60rpx" src="/static/images/a48.png"></u-image>
							<view class="">遗传史</view>
						</view>
						<view class="right">易小博</view>
					</view>
				</u-form-item>
				<u-form-item :borderBottom="false">
					<view class="form-item">
						<view class="left">
							<u-image width="60rpx" height="60rpx" src="/static/images/a49.png"></u-image>
							<view class="">就诊人关系</view>
						</view>
						<view class="right">易小博</view>
					</view>
				</u-form-item>
			</view>
		</u--form>
		
		<!-- 就诊记录 -->
		<view class="record-list">
			<view class="recore-item" v-for="(item ,i) in 8" :key="i" @tap="goDetail">
				<view class="left">
					<view class="">就诊记录</view>
					<view class="time">2023-11-16</view>
				</view>
				<view class="right">
					<view class="">查看详情</view>
					<u-icon name="arrow-right" color="#B3BCCC" size="14"></u-icon>
				</view>
			</view>
		</view>
	</view>

</template>

<script setup>
	const model = ref({
		name: '',
		self: false,
		relationship: '',
	})
	
	const goDetail = () => {
		uni.navigateTo({
			url: '/mine/medical/detail'
		})
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 50rpx 26rpx;

		.form {
			padding: 0 44rpx;
			background: #FFFFFF;
			border-radius: 30rpx;

			.form-item {
				@include between(100%);
				padding: 10rpx 0;

				.left {
					@include start(220rpx);

					&>view {
						color: #B3BCCC;
						font-size: 28rpx;
						margin-left: 16rpx;
					}
				}

				.right {
					width: 350rpx;
					font-size: 28rpx;
					color: #312C2A;
					text-align: right;
				}
			}
		}
	}

	.record-list {
		margin-top: 30rpx;
		.recore-item {
			@include between(100%);
			padding: 38rpx 40rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			margin-bottom: 20rpx;
			.left {
				@include start();
				color: #606672;
				.time {
					margin-left: 20rpx;
				}
			}
			.right {
				@include start();
				color: #B3BCCC;
				& > view {
					margin-right: 14rpx;
				}
			}
		}
	}

	.self-set {
		@include end(100%);
	}
</style>